<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="menuLeave">
      <dt>全部分类</dt>
      <dd
        @mouseenter="menuEnter(item)"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <i class="el-icon-star-off"></i>
        {{ item.name }}
        <span class="arrow"></span>
      </dd>
    </dl>
    <div
      v-if="curDetail"
      class="detail"
      @mouseenter="detailEnter"
      @mouseleave="detailLeave"
    >
      <template v-for="(item, index) in curDetail.items">
        <h4 :key="index">{{ item.title }}</h4>
        <span v-for="(v, i) in item.items" :key="v + i">{{ v }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import api from "@/api/index.js";
export default {
  data() {
    return {
      curDetail: null,
      menuList: "",
    };
  },
  created() {
    api.getMenuList().then((res) => {
      this.menuList = res.data.data;
    });
  },
  methods: {
    menuEnter(item) {
      this.curDetail = item;
    },
    menuLeave() {
      let _this = this;
      this.time = setTimeout(() => {
        _this.curDetail = null;
      }, 100);
    },
    detailEnter() {
      clearInterval(this.time);
    },
    detailLeave() {
      this.curDetail = null;
    },
  },
};
</script>

<style scoped>
</style>